<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemDeptApi } from '#/api/system/dept';
// import { getAiDutyStatusRecordsPage } from '#/api/moxi/aiDutyStatusRecords';
import type { AiDutyStatusRecordsApi } from '#/api/moxi/aiDutyStatusRecords';
import { getDingdEmployeeInfoPage } from '#/api/moxi/dingdemployeeinfo';

import { ref } from 'vue';
import { confirm, DocAlert, Page, useVbenDrawer } from '@vben/common-ui';
import { Card, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { $t } from '#/locales';
import { DICT_TYPE, getDictLabel } from '#/utils';

import { useGridColumns, useGridFormSchema } from './data';
import DeptTree from './modules/dept-tree.vue';
import Form from './modules/form.vue';

const [FormDrawer, formDrawerApi] = useVbenDrawer({
    connectedComponent: Form,
    destroyOnClose: true,
});

/** 刷新表格 */
function onRefresh() {
    gridApi.query();
}

/** 选择部门 */
const searchDeptId = ref<number | undefined>(undefined);

async function handleDeptSelect(dept: SystemDeptApi.Dept) {
    searchDeptId.value = dept.deptId;
    onRefresh();
}

/** 编辑用户 */
function handleEdit(row: AiDutyStatusRecordsApi.AiDutyStatusRecords) {
    //  console.log('111111',row);
    // console.log(row);
    
    console.log($t('common.edit'));
    // formDrawerApi.setData(row).open();
     formDrawerApi.setData({ ...row, searchDeptId: searchDeptId.value }).open();
}

const checkedIds = ref<number[]>([]);
function handleRowCheckboxChange({
    records,
}: {
    records: AiDutyStatusRecordsApi.AiDutyStatusRecords[];
}) {
    checkedIds.value = records.map((item) => item.id as number);
}

/** 更新用户状态 */
// async function handleStatusChange(
//   newStatus: number,
//   row: AiDutyStatusRecordsApi.AiDutyStatusRecords,
// ): Promise<boolean | undefined> {
//   return new Promise((resolve, reject) => {
//     confirm({
//       content: `你要将${row.username}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
//     })
//       .then(async () => {
//         // 更新用户状态
//         const res = await updateUserStatus(row.id as number, newStatus);
//         if (res) {
//           // 提示并返回成功
//           message.success($t('ui.actionMessage.operationSuccess'));
//           resolve(true);
//         } else {
//           reject(new Error('更新失败'));
//         }
//       })
//       .catch(() => {
//         reject(new Error('取消操作'));
//       });
//   });
// }

const [Grid, gridApi] = useVbenVxeGrid({
    formOptions: {
        schema: useGridFormSchema(),
    },
    gridOptions: {
        // columns: useGridColumns(handleStatusChange),
        columns: useGridColumns(),
        height: 'auto',
        keepSource: true,
        proxyConfig: {
            ajax: {
                query: async ({ page }, formValues) => {
                    if (searchDeptId.value)
                        return await getDingdEmployeeInfoPage({
                            pageNo: page.currentPage,
                            pageSize: page.pageSize,
                            // 1 表示在岗
                            type: 1,
                            ...formValues,
                            deptId: searchDeptId.value,
                        });
                },
            },
        },
        rowConfig: {
            keyField: 'id',
            isHover: true,
        },
        toolbarConfig: {
            refresh: { code: 'query' },
            search: true,
        },
    } as VxeTableGridOptions<AiDutyStatusRecordsApi.AiDutyStatusRecords>,
    gridEvents: {
        checkboxAll: handleRowCheckboxChange,
        checkboxChange: handleRowCheckboxChange,
    },
});
</script>

<template>
    <Page auto-content-height>
        <FormDrawer @success="onRefresh" />
        <ResetPasswordDrawer @success="onRefresh" />
        <AssignRoleDrawer @success="onRefresh" />
        <ImportDrawer @success="onRefresh" />

        <div class="flex h-full w-full">
            <!-- 左侧部门树 -->
            <Card class="mr-4 h-full w-1/5 overflow-auto">
                <DeptTree @select="handleDeptSelect" />
            </Card>
            <!-- 右侧用户列表 -->
            <div class="w-4/5">
                <Grid table-title="用户列表">
                    <template #actions="{ row }">
                        <TableAction :actions="[
                            {
                                label: '详情',
                                type: 'link',
                                icon: ACTION_ICON.VIEW,
                                // auth: ['system:user:update'],
                                onClick: handleEdit.bind(null, row),
                            },
                        ]" />
                    </template>
                </Grid>
            </div>
        </div>
    </Page>
</template>
